{include file="public/nheader"}

<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
<link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css" />
<script type="text/javascript">
    window._AMapSecurityConfig = {
        securityJsCode: '775b21664ea3f9505e22fc3e7f81e416',
    }
</script>
<script
    src="https://webapi.amap.com/maps?v=2.0&key=e39f8da70435148bc68377fe912b6e2a&plugin=AMap.PolygonEditor,AMap.GeoJSON"></script>
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.js"></script>

<body>
    <div id="container"></div>
    <div class="info" id="text" style="top:1rem;left:1rem;width:5rem">
        点击获取坐标位置
    </div>
    <div id="myPageTop">
        <div class="input-item">
            <div class="input-item-prepend">
                <span class="input-item-text" style="width:8rem;">快速查找地区</span>
            </div>
            <input id='tipinput' type="text">
        </div>
    </div>
    {include file="public/nfooter"}
    <script type="text/javascript">
        var map = new AMap.Map("container", {
            zoom: 18,
            viewMode: '3D',
        });
        //输入提示
        var autoOptions = {
            input: "tipinput"
        };
        AMap.plugin(['AMap.PlaceSearch', 'AMap.AutoComplete'], function () {
            var auto = new AMap.AutoComplete(autoOptions);
            var placeSearch = new AMap.PlaceSearch({
                map: map
            });  //构造地点查询类
            auto.on("select", select);//注册监听，当选中某条记录时会触发
            function select(e) {
                placeSearch.setCity(e.poi.adcode);
                placeSearch.search(e.poi.name);  //关键字查询查询
            }
        });
        var path = <?= json_encode($arr, true) ?>;
        var polygon = [];
        for (var i = 0; i < path.length; i++) {
            var idata = new AMap.Polygon({
                path: path[i],
                strokeColor: "red",
                strokeWeight: 1,
                strokeOpacity: 0.6,
                fillOpacity: 0.6,
                fillColor: 'red',
                zIndex: 50,
                bubble: true,
            })
            polygon.push(idata);
        }
        map.add(polygon);

        // 缩放地图到合适的视野级别
        map.setFitView()
        map.on('click', showInfoClick);
        function showInfoClick(e) {
            var text = '坐标[ ' + e.lnglat.getLng() + ',' + e.lnglat.getLat() + ' ]'
            document.querySelector("#text").innerText = text;
        }
    </script>
</body>

</html>